/*
 * @Description: 日志详情
 * @Author: Rfan
 * @Date: 2022-09-19 17:37:05
 * @LastEditTime: 2022-09-19 17:46:09
 */

import { useEffect } from 'react';
import { Button, Form, Modal, Typography } from 'antd';
import dayjs from 'dayjs';
import { IOperateLogRes } from '@/api/log/operate';
import { formatDate } from '@/utils';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';

const { Paragraph } = Typography;

interface IOperateDetailDialogProps extends ICommonDialog {
  data: IOperateLogRes;
}

const OperateDetailDialog: FC<IOperateDetailDialogProps> = (props) => {
  const { visible, data, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(data);
    }
  }, [visible]);

  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      destroyOnClose
      title="详情"
      width={600}
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button
          key="submit"
          type="primary"
          onClick={() => {
            onCancel();
          }}
        >
          确认
        </Button>
      ]}
    >
      <Form
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 19 }}
        preserve={false}
        initialValues={data}
        form={form}
      >
        <Form.Item label="根路径">{data.basePath}</Form.Item>
        <Form.Item label="ip">{data.ip}</Form.Item>
        <Form.Item label="URI">{data.uri}</Form.Item>
        <Form.Item label="URL">{data.url}</Form.Item>
        <Form.Item label="请求类型">{data.method}</Form.Item>
        <Form.Item label="请求参数">
          <Paragraph ellipsis={{ rows: 4, expandable: true, symbol: '更多' }}>
            {data.parameter}
          </Paragraph>
        </Form.Item>
        <Form.Item label="请求结果">
          <Paragraph ellipsis={{ rows: 4, expandable: true, symbol: '更多' }}>
            {data.result}
          </Paragraph>
        </Form.Item>
        <Form.Item label="操作者">{data.userName}</Form.Item>
        <Form.Item label="操作时间">{formatDate(data.operateTime)}</Form.Item>
        <Form.Item label="消耗时间">
          {dayjs.duration(data.spendTime).asMilliseconds() + 'ms'}
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default OperateDetailDialog;
